<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    
    <title><?php echo $pagevals['page_title'] ?></title>
    <meta name="author" content="SuggeElson" />
    <meta name="description" content="Supr admin template - new premium responsive admin template. This template is designed to help you build the site administration without losing valuable time.Template contains all the important functions which must have one backend system.Build on great twitter boostrap framework" />
    <meta name="keywords" content="admin, admin template, admin theme, responsive, responsive admin, responsive admin template, responsive theme, themeforest, 960 grid system, grid, grid theme, liquid, masonry, jquery, administration, administration template, administration theme, mobile, touch , responsive layout, boostrap, twitter boostrap" />
    <meta name="application-name" content="Supr admin template" />

    <!-- Mobile Specific Metas -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <!-- Le styles -->

    <!-- Use new way for google web fonts 
    http://www.smashingmagazine.com/2012/07/11/avoiding-faux-weights-styles-google-web-fonts -->
    <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,700' rel='stylesheet' type='text/css' /> <!-- Headings -->
    <link href='http://fonts.googleapis.com/css?family=Droid+Sans:400,700' rel='stylesheet' type='text/css' /> <!-- Text -->
    <!--[if lt IE 9]>
    <link href="http://fonts.googleapis.com/css?family=Open+Sans:400" rel="stylesheet" type="text/css" />
    <link href="http://fonts.googleapis.com/css?family=Open+Sans:700" rel="stylesheet" type="text/css" />
    <link href="http://fonts.googleapis.com/css?family=Droid+Sans:400" rel="stylesheet" type="text/css" />
    <link href="http://fonts.googleapis.com/css?family=Droid+Sans:700" rel="stylesheet" type="text/css" />
    <![endif]-->

    <link href="<?php echo Yii::app()->baseUrl;?>/supr/css/bootstrap/bootstrap.css" rel="stylesheet" type="text/css" />
    <link href="<?php echo Yii::app()->baseUrl;?>/supr/css/bootstrap/bootstrap-responsive.css" rel="stylesheet" type="text/css" />
    <link href="<?php echo Yii::app()->baseUrl;?>/supr/css/supr-theme/jquery.ui.supr.css" rel="stylesheet" type="text/css" />
    <link href="<?php echo Yii::app()->baseUrl;?>/supr/css/icons.css" rel="stylesheet" type="text/css" />
    <!-- Plugin stylesheets -->
    <link href="<?php echo Yii::app()->baseUrl;?>/supr/plugins/qtip/jquery.qtip.css" rel="stylesheet" type="text/css" />
    <link href="<?php echo Yii::app()->baseUrl;?>/supr/plugins/fullcalendar/fullcalendar.css" rel="stylesheet" type="text/css" />
    <link href="<?php echo Yii::app()->baseUrl;?>/supr/plugins/jpages/jPages.css" rel="stylesheet" type="text/css" />
    <link href="<?php echo Yii::app()->baseUrl;?>/supr/plugins/prettify/prettify.css" type="text/css" rel="stylesheet" />
    <link href="<?php echo Yii::app()->baseUrl;?>/supr/plugins/inputlimiter/jquery.inputlimiter.css" type="text/css" rel="stylesheet" />
    <link href="<?php echo Yii::app()->baseUrl;?>/supr/plugins/ibutton/jquery.ibutton.css" type="text/css" rel="stylesheet" />
    <link href="<?php echo Yii::app()->baseUrl;?>/supr/plugins/uniform/uniform.default.css" type="text/css" rel="stylesheet" />
    <link href="<?php echo Yii::app()->baseUrl;?>/supr/plugins/color-picker/color-picker.css" type="text/css" rel="stylesheet" />
    <link href="<?php echo Yii::app()->baseUrl;?>/supr/plugins/select/select2.css" type="text/css" rel="stylesheet" />
    <link href="<?php echo Yii::app()->baseUrl;?>/supr/plugins/validate/validate.css" type="text/css" rel="stylesheet" />
    <link href="<?php echo Yii::app()->baseUrl;?>/supr/plugins/pnotify/jquery.pnotify.default.css" type="text/css" rel="stylesheet" />
    <link href="<?php echo Yii::app()->baseUrl;?>/supr/plugins/pretty-photo/prettyPhoto.css" type="text/css" rel="stylesheet" />
    <link href="<?php echo Yii::app()->baseUrl;?>/supr/plugins/smartWizzard/smart_wizard.css" type="text/css" rel="stylesheet" />
    <link href="<?php echo Yii::app()->baseUrl;?>/supr/plugins/dataTables/jquery.dataTables.css" type="text/css" rel="stylesheet" />
    <link href="<?php echo Yii::app()->baseUrl;?>/supr/plugins/elfinder/elfinder.css" type="text/css" rel="stylesheet" />
    <link href="<?php echo Yii::app()->baseUrl;?>/supr/plugins/plupload/jquery.ui.plupload/css/jquery.ui.plupload.css" type="text/css" rel="stylesheet" />

    <!-- Main stylesheets -->
    <link href="<?php echo Yii::app()->baseUrl;?>/supr/css/main.css" rel="stylesheet" type="text/css" /> 

    <!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
    <!--[if lt IE 9]>
      <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
    <!--[if lt IE 9]>
        <link type="text/css" href="<?php echo Yii::app()->baseUrl;?>/supr/css/ie.css" rel="stylesheet" />
    <![endif]-->

    <!-- Le fav and touch icons -->
    <link rel="shortcut icon" href="images/favicon.ico" />
    <link rel="apple-touch-icon-precomposed" sizes="144x144" href="images/apple-touch-icon-144-precomposed.png" />
    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="images/apple-touch-icon-114-precomposed.png" />
    <link rel="apple-touch-icon-precomposed" sizes="72x72" href="images/apple-touch-icon-72-precomposed.png" />
    <link rel="apple-touch-icon-precomposed" href="images/apple-touch-icon-57-precomposed.png" />

    <script type="text/javascript">
        //adding load class to body and hide page
        document.documentElement.className += 'loadstate';
    </script>
    
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /></head>
      
    <body>
        
     <script type="text/javascript" src="<?php echo Yii::app()->baseUrl ?>/scripts/jquery/jquery.min.js"></script> 
     <script type="text/javascript">
        $(document).ready(function(){
            
            var donut_chart = '<?php echo $pagevals['donut_chart']; ?>';
            $('#donut_chart').val(donut_chart);
            
            var status_donut_chart = '<?php echo $pagevals['status_donut_chart']; ?>';
            $('#status_donut_chart').val(status_donut_chart);
            
            var top_view_type = '<?php echo $pagevals['top_view_type']; ?>';
            $('#top_view').val(top_view_type);
            
            
            
           $("#donut_chart").change(function(){
               var donut_chart_change = $("#donut_chart").val();
                action = "?r=site/index&donut_chart="+donut_chart_change+"&status_donut_chart="+status_donut_chart+'&top_view_type='+top_view_type;
                window.location = action;
           }); 
           
           $("#status_donut_chart").change(function(){
               var status_donut_chart_change = $("#status_donut_chart").val();
                action = "?r=site/index&donut_chart="+donut_chart+"&status_donut_chart="+status_donut_chart_change+'&top_view_type='+top_view_type;
                window.location = action;
           }); 
           
           $("#top_view").change(function(){
               //alert('lol');
               var top_view_type_change = $("#top_view").val();
               action = "?r=site/index&donut_chart="+donut_chart+"&status_donut_chart="+status_donut_chart+'&top_view_type='+top_view_type_change;
               window.location = action;
           }); 
        });
    </script>
    <!-- loading animation -->
    <div id="qLoverlay"></div>
    <div id="qLbar"></div>

    <div id="header">

        <div class="navbar">
            <div class="navbar-inner">
              <div class="container-fluid">
                <a class="brand" href="?r=game">Admin<span class="slogan"><?php echo $pagevals['subpage_title'] ?></span></a>
                <div class="nav-no-collapse">
                    <ul class="nav">
                        <li><a href="?r=site"><span class="icon16 icomoon-icon-screen"></span> Dashboard</a></li>
                        <li style="display:none" class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                                <span class="icon16 icomoon-icon-cog"></span> Settings
                                <b class="caret"></b>
                            </a>
                            <ul style="display:none" class="dropdown-menu">
                                <li class="menu">
                                    <ul>
                                        <li>                                                    
                                            <a href="#"><span class="icon16 iconic-icon-new-window"></span>Site config</a>
                                        </li>
                                        <li>                                                    
                                            <a href="#"><span class="icon16 icomoon-icon-wrench"></span>Plugins</a>
                                        </li>
                                        <li>
                                            <a href="#"><span class="icon16 icomoon-icon-picture-2"></span>Themes</a>
                                        </li>
                                    </ul>
                                </li>
                            </ul>
                        </li>
                        <li style="display:none" class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                                <span class="icon16 icomoon-icon-mail"></span>Messages <span class="notification">8</span>
                            </a>
                            <ul class="dropdown-menu">
                                <li class="menu">
                                    <ul class="messages">    
                                        <li class="header"><strong>Messages</strong> (10) emails and (2) PM</li>
                                        <li>
                                           <span class="icon"><span class="icon16 icomoon-icon-user-2"></span></span>
                                            <span class="name"><a data-toggle="modal" href="#myModal1"><strong>Sammy Morerira</strong></a><span class="time">35 min ago</span></span>
                                            <span class="msg">I have question about new function ...</span>
                                        </li>
                                        <li>
                                           <span class="icon avatar"><img src="<?php echo Yii::app()->baseUrl ?>/supr/images/avatar.jpg" alt="" /></span>
                                            <span class="name"><a data-toggle="modal" href="#myModal1"><strong>George Michael</strong></a><span class="time">1 hour ago</span></span>
                                            <span class="msg">I need to meet you urgent please call me ...</span>
                                        </li>
                                        <li>
                                            <span class="icon"><span class="icon16 icomoon-icon-mail"></span></span>
                                            <span class="name"><a data-toggle="modal" href="#myModal1"><strong>Ivanovich</strong></a><span class="time">1 day ago</span></span>
                                            <span class="msg">I send you my suggestion, please look and ...</span>
                                        </li>
                                        <li class="view-all"><a href="#">View all messages <span class="icon16  icomoon-icon-arrow-right-7"></span></a></li>
                                    </ul>
                                </li>
                            </ul>
                        </li>
                    </ul>

                    <ul class="nav pull-right usernav">
                        <li style="display:none" class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                                <span class="icon16 icomoon-icon-bell"></span><span class="notification">3</span>
                            </a>
                            <ul class="dropdown-menu">
                                <li class="menu">
                                    <ul class="notif">
                                        <li class="header"><strong>Notifications</strong> (3) items</li>
                                        <li>
                                            <a href="#">
                                                <span class="icon"><span class="icon16 icomoon-icon-user-2"></span></span>
                                                <span class="event">1 User is registred</span>
                                            </a>
                                        </li>
                                        <li>
                                            <a href="#">
                                                <span class="icon"><span class="icon16 icomoon-icon-comments-4"></span></span>
                                                <span class="event">Jony add 1 comment</span>
                                            </a>
                                        </li>
                                        <li>
                                            <a href="#">
                                                <span class="icon"><span class="icon16 icomoon-icon-new"></span></span>
                                                <span class="event">admin Julia added post</span>
                                            </a>
                                        </li>
                                        <li class="view-all"><a href="#">View all notifications <span class="icon16  icomoon-icon-arrow-right-7"></span></a></li>
                                    </ul>
                                </li>
                            </ul>
                        </li>
                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle avatar" data-toggle="dropdown">
                                <img src="<?php echo Yii::app()->baseUrl ?>/uploads/images/others/546871776781645.jpeg" alt="" class="image" /> 
                                <span class="txt"><?php echo Yii::app()->user->name; ?></span>
                                <b class="caret"></b>
                            </a>
                            <ul class="dropdown-menu">
                                <li class="menu">
                                    <ul>
                                        <li>
                                            <a href="?r=systemAccount/edit&id=<?php echo Yii::app()->user->id;?>"><span class="icon16 icomoon-icon-user-3"></span>Edit profile</a>
                                        </li>
                                        <li style="display:none">
                                            <a href="#"><span class="icon16 icomoon-icon-comments-2"></span>Approve comments</a>
                                        </li>
                                        <li style="display:none">
                                            <a href="#"><span class="icon16 entypo-icon-contact"></span>Add user</a>
                                        </li>
                                    </ul>
                                </li>
                            </ul>
                        </li>
                        <li><a href="?r=site/logout"><span class="icon16 icomoon-icon-exit"></span> Logout</a></li>
                    </ul>
                </div><!-- /.nav-collapse -->
              </div>
            </div><!-- /navbar-inner -->
          </div><!-- /navbar --> 

    </div><!-- End #header -->

    <div id="wrapper">

        <!--Responsive navigation button-->  
        <div class="resBtn">
            <a href="#"><span class="icon16 minia-icon-list-3"></span></a>
        </div>

        <!--Sidebar collapse button-->  
        <div class="collapseBtn">
             <a href="#" class="tipR" title="Hide sidebar"><span class="icon12 minia-icon-layout"></span></a>
        </div>

        <!--Sidebar background-->
        <div id="sidebarbg"></div>
        <!--Sidebar content-->
        <div id="sidebar">


            <div class="shortcuts">
                <ul>
                    <li><a href="?r=site/index" title="Dashboard" class="tip"><span class="icon24 icomoon-icon-stats-up"></span></a></li>
                    <li><a href="?r=systemAccountPermision" title="Phân quyền" class="tip"><span class="icon24 brocco-icon-flag"></span></a></li>
                    <li><a href="?r=product/create" title="Thêm sản phẩm"><span class="icon24  brocco-icon-cart"></span></a></li>
                    <li><a href="?r=post/create" title="Viết bài" class="tip"><span class="icon24 icomoon-icon-pencil"></span></a></li>
                </ul>
            </div>

            <!-- End search -->

            <div class="sidenav">

                <div class="sidebar-widget" style="margin: -1px 0 0 0;">
                    <h5 class="title" style="margin-bottom:0">Navigation</h5>
                </div><!-- End .sidenav-widget -->
                <div class="mainnav">
                    <ul>
                        <li>
                            <a href="#"><span class="icon16 icomoon-icon-newspaper"></span>Quản trị bài viết</a>
                            <ul class="sub">
                                <li><a href="?r=pcategory"><span class="icon16 icomoon-icon-arrow-right"></span>Cài đặt danh mục</a></li>
                                <li><a href="?r=post"><span class="icon16 icomoon-icon-arrow-right"></span>Bài đăng</a></li>
                            </ul>
                        </li>

                        <li>
                            <a href="#"><span class="icon16 brocco-icon-cart"></span>Quản trị sản phẩm</a>
                            <ul  class="sub">
                                <li><a href="?r=prcategory"><span class="icon16  icomoon-icon-arrow-right"></span>Danh mục sản phẩm</a></li>
                                <li><a href="?r=product"><span class="icon16  icomoon-icon-arrow-right"></span>Sản phẩm</a></li>

                            </ul>
                        </li>


                        <li>
                            <a href="#"><span class="icon16 entypo-icon-users"></span>Quản trị người dùng</a>
                            <ul class="sub">
                                <li style="display:none"><a href="?r=user"><span class="icon16  icomoon-icon-arrow-right"></span>Tài khoản người dùng</a></li>
                                <li><a href="?r=systemAccount"><span class="icon16  icomoon-icon-arrow-right"></span>Tài khoản hệ thống</a></li>
                                <li><a href="?r=systemAccountPermision"><span class="icon16  icomoon-icon-arrow-right"></span>Phân quyền</a></li>
                            </ul>
                        </li>
                        <li>
                            <a href="#"><span class="icon16 brocco-icon-wrench"></span>Cài đặt website</a>
                            <ul class="sub">

                                <li><a href="?r=storeconfig/index"><span class="icon16 icomoon-icon-arrow-right"></span>Thôg tin cơ bản</a></li>

                                <li><a href="?r=storeconfig/bankinfo"><span class="icon16 icomoon-icon-arrow-right"></span>Thông tin tài khoản</a></li>
                                <li><a href="?r=slidebanner"><span class="icon16 icomoon-icon-arrow-right"></span>Cài đặt slide</a></li>
                                <li><a href="?r=storeconfig/popup"><span class="icon16 icomoon-icon-arrow-right"></span>Ảnh Popup</a></li>
                            </ul>
                        </li>
                        <li style="display:none">
                            <a  href="?r=pool"><span class="icon16 icomoon-icon-radio-checked "></span>Quản trị bình chọn</a>

                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <!--Body content-->
        <div id="content" class="clearfix">
            <div class="contentwrapper"><!--Content wrapper-->

                <div class="heading">
                    <h3><?php echo $pagevals['subpage_title'] ?></h3>                    
                </div>
    				
                <!-- Build page from here: Usual with <div class="row-fluid"></div> -->

                    <div class="row-fluid">
   
                        <div class="span6">

                            <div class="box chart">

                                <div class="title">
                                    <h4>
                                        <span class="icon16 icomoon-icon-bars"></span>
                                        <span>Số lượng</span>
                                    </h4>
                                    <a href="#" class="minimize">Minimize</a>
                                    <div class="filter-wrapper" style="margin-left: 17px;margin-bottom: 8px">
                                        <table>
                                            <tr>
                                                <td><label class="filter-label">Loại</label></td>
                                                <td><label class="filter-label">Trạng thái</label></td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    <select id="donut_chart" name="donut_chart" style="opacity: 0;" title="">
                                                      
                                                        <option class="filter_label" value="Post">Bài viết</option>
                                                       
                                                    </select>
                                                </td>
                                                <td>
                                                    <select id="status_donut_chart" name="status_donut_chart" style="opacity: 0;" title="">
                                                        <option class="filter_label" value="all">All</option>
                                                        <option class="filter_label" value="pending">Pending</option>
                                                        <option class="filter_label" value="active">Active</option>
                                                        <option class="filter_label" value="approved">Approved</option>
                                                        <option class="filter_label" value="blocked">Blocked</option>
                                                        <option class="filter_label" value="deleted">Deleted</option>
                                                    </select>
                                                </td>
                                            </tr>
                                        </table>
                                    </div>
                                    
                                    <a href="#" class="minimize">Minimize</a>
                                    
                                </div>
                                <div class="content">
                                   <div class="simple-donut" style="height: 230px;width:100%;">

                                    </div>
                                </div>

                            </div><!-- End .box -->
                        
                        </div><!-- End .span6 -->
                        
                        <div class="span6" style="display: none">

                            <div class="box chart">

                                <div class="title">

                                    <h4>
                                        <span class="icon16 icomoon-icon-bars"></span>
                                        <span>Top view</span>
                                    </h4>
                                    <a href="#" class="minimize">Minimize</a>
                                    <div class="filter-wrapper" style="margin-left: 17px;margin-bottom: 8px">
                                        <table>
                                            <tr>
                                                <td><label class="filter-label">Loại</label></td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    <select id="top_view" name="top_view" style="opacity: 0;" title="">
                                                        
                                                        <option class="filter_label" value="post">Bài viết</option>
                                                        
                                                    </select>
                                                </td>
                                            </tr>
                                        </table>
                                    </div>
                                </div>
                                <div class="content">
                                   <div class="order-bars-chart-2" style="height: 230px;width:100%;">

                                    </div>
                                </div>

                            </div><!-- End .box -->
                        
                        </div><!-- End .span6 -->
                        
                       

                    </div><!-- End .row-fluid -->

                    <div class="row-fluid" style="display: none">

                        <div class="span6">

                            <div class="box chart">

                                <div class="title">

                                    <h4>
                                        <span class="icon16 icomoon-icon-bars"></span>
                                        <span>Stacked Bars chart</span>
                                    </h4>
                                    <a href="#" class="minimize">Minimize</a>
                                </div>
                                <div class="content">
                                   <div class="stacked-bars-chart" style="height: 230px;width:100%;">

                                    </div>
                                </div>

                            </div><!-- End .box -->
                        
                        </div><!-- End .span6 -->
                        
                        <div class="span6">

                            <div class="box chart">

                                <div class="title">

                                    <h4>
                                        <span class="icon16 icomoon-icon-bars"></span>
                                        <span>Ordered Bars chart</span>
                                    </h4>
                                    <a href="#" class="minimize">Minimize</a>
                                </div>
                                <div class="content">
                                   <div class="order-bars-chart" style="height: 230px;width:100%;">

                                    </div>
                                </div>

                            </div><!-- End .box -->
                        
                        </div><!-- End .span6 -->
                        

                    </div><!-- End .row-fluid -->

               
    			<!-- Page end here -->
    				
                <div class="modal fade hide" id="myModal1">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal"><span class="icon12 minia-icon-close"></span></button>
                        <h3>Chat layout</h3>
                    </div>
                    <div class="modal-body">
                        <ul class="messages">
                            <li class="user clearfix">
                                <a href="#" class="avatar">
                                    <img src="<?php echo Yii::app()->baseUrl;?>/supr/images/avatar2.jpeg" alt="" />
                                </a>
                                <div class="message">
                                    <div class="head clearfix">
                                        <span class="name"><strong>Lazar</strong> says:</span>
                                        <span class="time">25 seconds ago</span>
                                    </div>
                                    <p>
                                        Time to go i call you tomorrow.
                                    </p>
                                </div>
                            </li>
                            <li class="admin clearfix">
                                <a href="#" class="avatar">
                                    <img src="<?php echo Yii::app()->baseUrl;?>/supr/images/avatar3.jpeg" alt="" />
                                </a>
                                <div class="message">
                                    <div class="head clearfix">
                                        <span class="name"><strong>Sugge</strong> says:</span>
                                        <span class="time">just now</span>
                                    </div>
                                    <p>
                                        OK, have a nice day.
                                    </p>
                                </div>
                            </li>

                            <li class="sendMsg">
                                <form class="form-horizontal" action="#" />
                                    <textarea class="elastic" id="textarea" rows="1" placeholder="Enter your message ..." style="width:98%;"></textarea>
                                    <button type="submit" class="btn btn-info marginT10">Send message</button>
                                </form>
                            </li>
                            
                        </ul>
                    </div>
                    <div class="modal-footer">
                        <a href="#" class="btn" data-dismiss="modal">Close</a>
                    </div>
                </div>
                
            </div><!-- End contentwrapper -->
        </div><!-- End #content -->
    
    </div><!-- End #wrapper -->

    <!-- Le javascript
    ================================================== -->
    <script type="text/javascript" src="<?php echo Yii::app()->baseUrl ?>/scripts/jquery/jquery.min.js"></script>
    <script type="text/javascript" src="<?php echo Yii::app()->baseUrl;?>/supr/js/bootstrap/bootstrap.js"></script>  
    <script type="text/javascript" src="<?php echo Yii::app()->baseUrl;?>/supr/js/jquery.cookie.js"></script>
    <script type="text/javascript" src="<?php echo Yii::app()->baseUrl;?>/supr/js/jquery.mousewheel.js"></script>

    <!-- Load plugins -->
    <script type="text/javascript" src="<?php echo Yii::app()->baseUrl;?>/supr/plugins/qtip/jquery.qtip.min.js"></script>
    <script type="text/javascript" src="<?php echo Yii::app()->baseUrl;?>/supr/plugins/flot/jquery.flot.js"></script>
    <script type="text/javascript" src="<?php echo Yii::app()->baseUrl;?>/supr/plugins/flot/jquery.flot.grow.js"></script>
    <script type="text/javascript" src="<?php echo Yii::app()->baseUrl;?>/supr/plugins/flot/jquery.flot.pie.js"></script>
    <script type="text/javascript" src="<?php echo Yii::app()->baseUrl;?>/supr/plugins/flot/jquery.flot.resize.js"></script>
    <script type="text/javascript" src="<?php echo Yii::app()->baseUrl;?>/supr/plugins/flot/jquery.flot.tooltip_0.4.4.js"></script>
    <script type="text/javascript" src="<?php echo Yii::app()->baseUrl;?>/supr/plugins/flot/jquery.flot.orderBars.js"></script>

    <script type="text/javascript" src="<?php echo Yii::app()->baseUrl;?>/supr/plugins/sparkline/jquery.sparkline.min.js"></script>
    <script type="text/javascript" src="<?php echo Yii::app()->baseUrl;?>/supr/plugins/knob/jquery.knob.js"></script>
    <script type="text/javascript" src="<?php echo Yii::app()->baseUrl;?>/supr/plugins/fullcalendar/fullcalendar.min.js"></script>
    <script type="text/javascript" src="<?php echo Yii::app()->baseUrl;?>/supr/plugins/prettify/prettify.js"></script>

    <script type="text/javascript" src="<?php echo Yii::app()->baseUrl;?>/supr/plugins/watermark/jquery.watermark.min.js"></script>
    <script type="text/javascript" src="<?php echo Yii::app()->baseUrl;?>/supr/plugins/elastic/jquery.elastic.js"></script>
    <script type="text/javascript" src="<?php echo Yii::app()->baseUrl;?>/supr/plugins/inputlimiter/jquery.inputlimiter.1.3.min.js"></script>
    <script type="text/javascript" src="<?php echo Yii::app()->baseUrl;?>/supr/plugins/maskedinput/jquery.maskedinput-1.3.min.js"></script>
    <script type="text/javascript" src="<?php echo Yii::app()->baseUrl;?>/supr/plugins/ibutton/jquery.ibutton.min.js"></script>
    <script type="text/javascript" src="<?php echo Yii::app()->baseUrl;?>/supr/plugins/uniform/jquery.uniform.min.js"></script>
    <script type="text/javascript" src="<?php echo Yii::app()->baseUrl;?>/supr/plugins/stepper/ui.stepper.js"></script>
    <script type="text/javascript" src="<?php echo Yii::app()->baseUrl;?>/supr/plugins/color-picker/colorpicker.js"></script>
    <script type="text/javascript" src="<?php echo Yii::app()->baseUrl;?>/supr/plugins/timeentry/jquery.timeentry.min.js"></script>
    <script type="text/javascript" src="<?php echo Yii::app()->baseUrl;?>/supr/plugins/select/select2.min.js"></script>
    <script type="text/javascript" src="<?php echo Yii::app()->baseUrl;?>/supr/plugins/dualselect/jquery.dualListBox-1.3.min.js"></script>
    <script type="text/javascript" src="<?php echo Yii::app()->baseUrl;?>/supr/plugins/tiny_mce/jquery.tinymce.js"></script>
    <script type="text/javascript" src="<?php echo Yii::app()->baseUrl;?>/supr/plugins/validate/jquery.validate.min.js"></script>

    <script type="text/javascript" src="<?php echo Yii::app()->baseUrl;?>/supr/plugins/animated-progress-bar/jquery.progressbar.js"></script>
    <script type="text/javascript" src="<?php echo Yii::app()->baseUrl;?>/supr/plugins/pnotify/jquery.pnotify.min.js"></script>
    <script type="text/javascript" src="<?php echo Yii::app()->baseUrl;?>/supr/plugins/lazy-load/jquery.lazyload.min.js"></script>
    <script type="text/javascript" src="<?php echo Yii::app()->baseUrl;?>/supr/plugins/jpages/jPages.min.js"></script>
    <script type="text/javascript" src="<?php echo Yii::app()->baseUrl;?>/supr/plugins/pretty-photo/jquery.prettyPhoto.js"></script>
    <script type="text/javascript" src="<?php echo Yii::app()->baseUrl;?>/supr/plugins/smartWizzard/jquery.smartWizard-2.0.min.js"></script>

    <script type="text/javascript" src="<?php echo Yii::app()->baseUrl;?>/supr/plugins/touch-punch/jquery.ui.touch-punch.min.js"></script>
    <script type="text/javascript" src="<?php echo Yii::app()->baseUrl;?>/supr/plugins/ios-fix/ios-orientationchange-fix.js"></script>

    <script type="text/javascript" src="<?php echo Yii::app()->baseUrl;?>/supr/plugins/dataTables/jquery.dataTables.min.js"></script>
    <script type="text/javascript" src="<?php echo Yii::app()->baseUrl;?>/supr/plugins/elfinder/elfinder.min.js"></script>
    <script type="text/javascript" src="<?php echo Yii::app()->baseUrl;?>/supr/plugins/plupload/plupload.js"></script>
    <script type="text/javascript" src="<?php echo Yii::app()->baseUrl;?>/supr/plugins/plupload/plupload.html4.js"></script>
    <script type="text/javascript" src="<?php echo Yii::app()->baseUrl;?>/supr/plugins/plupload/jquery.plupload.queue/jquery.plupload.queue.js"></script>


    <!-- Init plugins -->
    <!--script type="text/javascript" src="<?php echo Yii::app()->baseUrl;?>/supr/js/statistic.js"></script><!-- Control graphs ( chart, pies and etc) -->
    
    <script type="text/javascript">
        
        //generate random number for charts
        randNum = function(){
                //return Math.floor(Math.random()*101);
                return (Math.floor( Math.random()* (1+40-20) ) ) + 20;
        }


        var chartColours = ['#88bbc8', '#ed7a53', '#9FC569', '#bbdce3', '#9a3b1b', '#5a8022', '#2c7282'];

        //sparklines (making loop with random data for all 7 sparkline)
        i=1;
        for (i=1; i<8; i++) {
                var data = [[1, 3+randNum()], [2, 5+randNum()], [3, 8+randNum()], [4, 11+randNum()],[5, 14+randNum()],[6, 17+randNum()],[7, 20+randNum()], [8, 15+randNum()], [9, 18+randNum()], [10, 22+randNum()]];
                placeholder = '.sparkLine' + i;
                $(placeholder).sparkline(data, { 
                        width: 100,//Width of the chart - Defaults to 'auto' - May be any valid css width - 1.5em, 20px, etc (using a number without a unit specifier won't do what you want) - This option does nothing for bar and tristate chars (see barWidth)
                        height: 30,//Height of the chart - Defaults to 'auto' (line height of the containing tag)
                        lineColor: '#88bbc8',//Used by line and discrete charts to specify the colour of the line drawn as a CSS values string
                        fillColor: '#f2f7f9',//Specify the colour used to fill the area under the graph as a CSS value. Set to false to disable fill
                        spotColor: '#467e8c',//The CSS colour of the final value marker. Set to false or an empty string to hide it
                        maxSpotColor: '#9FC569',//The CSS colour of the marker displayed for the maximum value. Set to false or an empty string to hide it
                        minSpotColor: '#ED7A53',//The CSS colour of the marker displayed for the mimum value. Set to false or an empty string to hide it
                        spotRadius: 3,//Radius of all spot markers, In pixels (default: 1.5) - Integer
                        lineWidth: 2,//In pixels (default: 1) - Integer
                });
        }

        //sparkline in sidebar area
        var positive = [1,5,3,7,8,6,10];
        var negative = [10,6,8,7,3,5,1]
        var negative1 = [7,6,8,7,6,5,4]

        $('#stat1').sparkline(positive,{
                height:15,
                spotRadius: 0,
                barColor: '#9FC569',
                type: 'bar'
        });
        $('#stat2').sparkline(negative,{
                height:15,
                spotRadius: 0,
                barColor: '#ED7A53',
                type: 'bar'
        });
        $('#stat3').sparkline(negative1,{
                height:15,
                spotRadius: 0,
                barColor: '#ED7A53',
                type: 'bar'
        });
        $('#stat4').sparkline(positive,{
                height:15,
                spotRadius: 0,
                barColor: '#9FC569',
                type: 'bar'
        });
        //sparkline in widget
        $('#stat5').sparkline(positive,{
                height:15,
                spotRadius: 0,
                barColor: '#9FC569',
                type: 'bar'
        });

        $('#stat6').sparkline(positive, { 
                width: 70,//Width of the chart - Defaults to 'auto' - May be any valid css width - 1.5em, 20px, etc (using a number without a unit specifier won't do what you want) - This option does nothing for bar and tristate chars (see barWidth)
                height: 20,//Height of the chart - Defaults to 'auto' (line height of the containing tag)
                lineColor: '#88bbc8',//Used by line and discrete charts to specify the colour of the line drawn as a CSS values string
                fillColor: '#f2f7f9',//Specify the colour used to fill the area under the graph as a CSS value. Set to false to disable fill
                spotColor: '#e72828',//The CSS colour of the final value marker. Set to false or an empty string to hide it
                maxSpotColor: '#005e20',//The CSS colour of the marker displayed for the maximum value. Set to false or an empty string to hide it
                minSpotColor: '#f7941d',//The CSS colour of the marker displayed for the mimum value. Set to false or an empty string to hide it
                spotRadius: 3,//Radius of all spot markers, In pixels (default: 1.5) - Integer
                lineWidth: 2,//In pixels (default: 1) - Integer
        });

        // document ready function
        $(document).ready(function() {

                var divElement = $('div'); //log all div elements

                //circular progrress bar
                $(function () {

                        $(".greenCircle").knob({
                    'min':0,
                    'max':100,
                    'readOnly': true,
                    'width': 80,
                    'height': 80,
                    'fgColor': '#9FC569',
                    'dynamicDraw': true,
                    'thickness': 0.2,
                    'tickColorizeValues': true
                })
                $(".redCircle").knob({
                    'min':0,
                    'max':100,
                    'readOnly': true,
                    'width': 80,
                    'height': 80,
                    'fgColor': '#ED7A53',
                    'dynamicDraw': true,
                    'thickness': 0.2,
                    'tickColorizeValues': true
                })
                $(".blueCircle").knob({
                    'min':0,
                    'max':100,
                    'readOnly': true,
                    'width': 80,
                    'height': 80,
                    'fgColor': '#88BBC8',
                    'dynamicDraw': true,
                    'thickness': 0.2,
                    'tickColorizeValues': true
                })

                });

                //------------- Visitor chart -------------//

                if (divElement.hasClass('visitors-chart')) {
                $(function () {
                        //some data
                        var d1 = [[1, 3+randNum()], [2, 6+randNum()], [3, 9+randNum()], [4, 12+randNum()],[5, 15+randNum()],[6, 18+randNum()],[7, 21+randNum()],[8, 15+randNum()],[9, 18+randNum()],[10, 21+randNum()],[11, 24+randNum()],[12, 27+randNum()],[13, 30+randNum()],[14, 33+randNum()],[15, 24+randNum()],[16, 27+randNum()],[17, 30+randNum()],[18, 33+randNum()],[19, 36+randNum()],[20, 39+randNum()],[21, 42+randNum()],[22, 45+randNum()],[23, 36+randNum()],[24, 39+randNum()],[25, 42+randNum()],[26, 45+randNum()],[27,38+randNum()],[28, 51+randNum()],[29, 55+randNum()], [30, 60+randNum()]];
                        var d2 = [[1, randNum()-5], [2, randNum()-4], [3, randNum()-4], [4, randNum()],[5, 4+randNum()],[6, 4+randNum()],[7, 5+randNum()],[8, 5+randNum()],[9, 6+randNum()],[10, 6+randNum()],[11, 6+randNum()],[12, 2+randNum()],[13, 3+randNum()],[14, 4+randNum()],[15, 4+randNum()],[16, 4+randNum()],[17, 5+randNum()],[18, 5+randNum()],[19, 2+randNum()],[20, 2+randNum()],[21, 3+randNum()],[22, 3+randNum()],[23, 3+randNum()],[24, 2+randNum()],[25, 4+randNum()],[26, 4+randNum()],[27,5+randNum()],[28, 2+randNum()],[29, 2+randNum()], [30, 3+randNum()]];
                        //define placeholder class
                        var placeholder = $(".visitors-chart");
                        //graph options
                        var options = {
                                        grid: {
                                                show: true,
                                            aboveData: true,
                                            color: "#3f3f3f" ,
                                            labelMargin: 5,
                                            axisMargin: 0, 
                                            borderWidth: 0,
                                            borderColor:null,
                                            minBorderMargin: 5 ,
                                            clickable: true, 
                                            hoverable: true,
                                            autoHighlight: true,
                                            mouseActiveRadius: 20
                                        },
                                series: {
                                        grow: {
                                                active: false,
                                                stepMode: "linear",
                                                steps: 50,
                                                stepDelay: true
                                        },
                                    lines: {
                                        show: true,
                                        fill: true,
                                        lineWidth: 4,
                                        steps: false
                                        },
                                    points: {
                                        show:true,
                                        radius: 5,
                                        symbol: "circle",
                                        fill: true,
                                        borderColor: "#fff",
                                    }
                                },
                                legend: { 
                                        position: "ne", 
                                        margin: [0,-25], 
                                        noColumns: 0,
                                        labelBoxBorderColor: null,
                                        labelFormatter: function(label, series) {
                                                    // just add some space to labes
                                                    return label+'&nbsp;&nbsp;';
                                                 }
                                },
                                yaxis: { min: 0 },
                                xaxis: {ticks:11, tickDecimals: 0},
                                colors: chartColours,
                                shadowSize:1,
                                tooltip: true, //activate tooltip
                                        tooltipOpts: {
                                                content: "%s : %y.0",
                                                shifts: {
                                                        x: -30,
                                                        y: -50
                                                }
                                        }
                            };   

                        $.plot(placeholder, [ 

                                {
                                        label: "Visits", 
                                        data: d1,
                                        lines: {fillColor: "#f2f7f9"},
                                        points: {fillColor: "#88bbc8"}
                                }, 
                                {	
                                        label: "Unique Visits", 
                                        data: d2,
                                        lines: {fillColor: "#fff8f2"},
                                        points: {fillColor: "#ed7a53"}
                                } 

                        ], options);

            });
            }//end if



                //pie visits graph
                if (divElement.hasClass('pieStats')) {
                $(function () {
                   var data = [
                            { label: "%78.75 New Visitor",  data: 78.75, color: "#88bbc8"},
                            { label: "%21.25 Returning Visitor",  data: 21.25, color: "#ed7a53"}
                        ];

                        $.plot($(".pieStats"), data, 
                        {
                                series: {
                                        pie: { 
                                                show: true,
                                                highlight: {
                                                        opacity: 0.1
                                                },
                                                stroke: {
                                                        color: '#fff',
                                                        width: 3
                                                },
                                                startAngle: 2,
                                                label: {
                                                        radius:1
                                                }
                                        },
                                        grow: {	active: false},
                                },
                                legend: { 
                                position: "ne", 
                                labelBoxBorderColor: null
                        },
                                grid: {
                            hoverable: true,
                            clickable: true
                        },
                        tooltip: true, //activate tooltip
                                tooltipOpts: {
                                        content: "%s : %y.1",
                                        shifts: {
                                                x: -30,
                                                y: -50
                                        }
                                }
                        });
                });
                }//end if

                //------------- Graphs for chart.html page -------------//

                //Simple chart 
            if (divElement.hasClass('simple-chart')) {
                $(function () {
                        var sin = [], cos = [];
                    for (var i = 0; i < 14; i += 0.5) {
                        sin.push([i, Math.sin(i)]);
                        cos.push([i, Math.cos(i)]);
                    }
                    //graph options
                        var options = {
                                        grid: {
                                                show: true,
                                            aboveData: true,
                                            color: "#3f3f3f" ,
                                            labelMargin: 5,
                                            axisMargin: 0, 
                                            borderWidth: 0,
                                            borderColor:null,
                                            minBorderMargin: 5 ,
                                            clickable: true, 
                                            hoverable: true,
                                            autoHighlight: true,
                                            mouseActiveRadius: 20
                                        },
                                series: {
                                        grow: {active: false},
                                    lines: {
                                        show: true,
                                        fill: false,
                                        lineWidth: 4,
                                        steps: false
                                        },
                                    points: {
                                        show:true,
                                        radius: 5,
                                        symbol: "circle",
                                        fill: true,
                                        borderColor: "#fff",
                                    }
                                },
                                legend: { position: "se" },
                                colors: chartColours,
                                shadowSize:1,
                                tooltip: true, //activate tooltip
                                        tooltipOpts: {
                                                content: "%s : %y.3",
                                                shifts: {
                                                        x: -30,
                                                        y: -50
                                                }
                                        }
                        };  
                        var plot = $.plot($(".simple-chart"),
                   [{
                                label: "Sin", 
                                data: sin,
                                lines: {fillColor: "#f2f7f9"},
                                points: {fillColor: "#88bbc8"}
                        }, 
                        {	
                                label: "Cos", 
                                data: cos,
                                lines: {fillColor: "#fff8f2"},
                                points: {fillColor: "#ed7a53"}
                        }], options);
                });
                }//end if

                //Donut simple chart
            if (divElement.hasClass('simple-donut')) {
                $(function () {
                        var data = [
                            
                            <?php 
                                foreach ($pagevals['donut_chart_data'] as $key => $value){
                                    echo '{ label: "'.$key.'",  data: '.$value.',},';
                                }
                            ?>
                        ];

                    $.plot($(".simple-donut"), data, 
                        {
                                series: {
                                        pie: { 
                                                show: true,
                                                innerRadius: 0.4,
                                                highlight: {
                                                        opacity: 0.1
                                                },
                                                radius: 1,
                                                stroke: {
                                                        color: '#fff',
                                                        width: 8
                                                },
                                                startAngle: 2,
                                            combine: {
                                    color: '#353535',
                                    threshold: 0.05
                                },
                                label: {
                                    show: true,
                                    radius: 1,
                                    formatter: function(label, series){
                                        return '<div class="pie-chart-label">'+label+'&nbsp;'+Math.round(series.percent)+'%</div>';
                                    }
                                }
                                        },
                                        grow: {	active: false}
                                },
                                legend:{show:false},
                                grid: {
                            hoverable: true,
                            clickable: true
                        },
                        tooltip: true, //activate tooltip
                                tooltipOpts: {
                                        content: "%s : %y.1"+"%",
                                        shifts: {
                                                x: -30,
                                                y: -50
                                        }
                                }
                        });
                });
                }//end if

                //Pie simple chart
            if (divElement.hasClass('simple-pie')) {
                $(function () {
                        var data = [
                            { label: "USA",  data: 38, color: "#88bbc8"},
                            { label: "Brazil",  data: 23, color: "#ed7a53"},
                            { label: "India",  data: 15, color: "#9FC569"},
                            { label: "Turkey",  data: 9, color: "#bbdce3"},
                            { label: "France",  data: 7, color: "#9a3b1b"},
                            { label: "China",  data: 5, color: "#5a8022"},
                            { label: "Germany",  data: 3, color: "#2c7282"}
                        ];

                    $.plot($(".simple-pie"), data, 
                        {
                                series: {
                                        pie: { 
                                                show: true,
                                                highlight: {
                                                        opacity: 0.1
                                                },
                                                radius: 1,
                                                stroke: {
                                                        color: '#fff',
                                                        width: 2
                                                },
                                                startAngle: 2,
                                            combine: {
                                    color: '#353535',
                                    threshold: 0.05
                                },
                                label: {
                                    show: true,
                                    radius: 1,
                                    formatter: function(label, series){
                                        return '<div class="pie-chart-label">'+label+'&nbsp;'+Math.round(series.percent)+'%</div>';
                                    }
                                }
                                        },
                                        grow: {	active: false}
                                },
                                legend:{show:false},
                                grid: {
                            hoverable: true,
                            clickable: true
                        },
                        tooltip: true, //activate tooltip
                                tooltipOpts: {
                                        content: "%s : %y.1"+"%",
                                        shifts: {
                                                x: -30,
                                                y: -50
                                        }
                                }
                        });
                });
                }//end if


                //Ordered bars chart
           
            
                //Ordered bars chart
            
                //Stacked bars chart
            if (divElement.hasClass('stacked-bars-chart')) {
                $(function () {
                        //some data
                        var d1 = [];
                    for (var i = 0; i <= 10; i += 1)
                        d1.push([i, parseInt(Math.random() * 30)]);

                    var d2 = [];
                    for (var i = 0; i <= 10; i += 1)
                        d2.push([i, parseInt(Math.random() * 30)]);

                    var d3 = [];
                    for (var i = 0; i <= 10; i += 1)
                        d3.push([i, parseInt(Math.random() * 30)]);

                    var ds = new Array();

                     ds.push({
                        label: "Data One",
                        data:d1
                    });
                    ds.push({
                        label: "Data Two",
                        data:d2
                    });
                    ds.push({
                        label: "Data Tree",
                        data:d3
                    });

                        var stack = 0, bars = true, lines = false, steps = false;

                        var options = {
                                        grid: {
                                                show: true,
                                            aboveData: false,
                                            color: "#3f3f3f" ,
                                            labelMargin: 5,
                                            axisMargin: 0, 
                                            borderWidth: 0,
                                            borderColor:null,
                                            minBorderMargin: 5 ,
                                            clickable: true, 
                                            hoverable: true,
                                            autoHighlight: true,
                                            mouseActiveRadius: 20
                                        },
                                series: {
                                        grow: {active:false},
                                        stack: stack,
                                lines: { show: lines, fill: true, steps: steps },
                                bars: { show: bars, barWidth: 0.5, fill:1}
                                    },
                                xaxis: {ticks:11, tickDecimals: 0},
                                legend: { position: "se" },
                                colors: chartColours,
                                shadowSize:1,
                                tooltip: true, //activate tooltip
                                        tooltipOpts: {
                                                content: "%s : %y.0",
                                                shifts: {
                                                        x: -30,
                                                        y: -50
                                                }
                                        }
                        };

                        $.plot($(".stacked-bars-chart"), ds, options);
                });
                }//end if



                //Lines chart without points
            if (divElement.hasClass('lines-chart')) {
                $(function () {

                        //some data
                        var d1 = [[1, 3+randNum()], [2, 6+randNum()], [3, 9+randNum()], [4, 12+randNum()],[5, 15+randNum()],[6, 18+randNum()],[7, 21+randNum()],[8, 15+randNum()],[9, 18+randNum()],[10, 21+randNum()],[11, 24+randNum()],[12, 27+randNum()],[13, 30+randNum()],[14, 33+randNum()],[15, 24+randNum()],[16, 27+randNum()],[17, 30+randNum()],[18, 33+randNum()],[19, 36+randNum()],[20, 39+randNum()],[21, 42+randNum()],[22, 45+randNum()],[23, 36+randNum()],[24, 39+randNum()],[25, 42+randNum()],[26, 45+randNum()],[27,38+randNum()],[28, 51+randNum()],[29, 55+randNum()], [30, 60+randNum()]];
                        var d2 = [[1, randNum()-5], [2, randNum()-4], [3, randNum()-4], [4, randNum()],[5, 4+randNum()],[6, 4+randNum()],[7, 5+randNum()],[8, 5+randNum()],[9, 6+randNum()],[10, 6+randNum()],[11, 6+randNum()],[12, 2+randNum()],[13, 3+randNum()],[14, 4+randNum()],[15, 4+randNum()],[16, 4+randNum()],[17, 5+randNum()],[18, 5+randNum()],[19, 2+randNum()],[20, 2+randNum()],[21, 3+randNum()],[22, 3+randNum()],[23, 3+randNum()],[24, 2+randNum()],[25, 4+randNum()],[26, 4+randNum()],[27,5+randNum()],[28, 2+randNum()],[29, 2+randNum()], [30, 3+randNum()]];
                        //define placeholder class
                        var placeholder = $(".lines-chart");
                        //graph options
                        var options = {
                                        grid: {
                                                show: true,
                                            aboveData: true,
                                            color: "#3f3f3f" ,
                                            labelMargin: 5,
                                            axisMargin: 0, 
                                            borderWidth: 0,
                                            borderColor:null,
                                            minBorderMargin: 5 ,
                                            clickable: true, 
                                            hoverable: true,
                                            autoHighlight: true,
                                            mouseActiveRadius: 20
                                        },
                                series: {
                                        grow: {active:false},
                                    lines: {
                                        show: true,
                                        fill: true,
                                        lineWidth: 2,
                                        steps: false
                                        },
                                    points: {show:false}
                                },
                                legend: { position: "se" },
                                yaxis: { min: 0 },
                                xaxis: {ticks:11, tickDecimals: 0},
                                colors: chartColours,
                                shadowSize:1,
                                tooltip: true, //activate tooltip
                                        tooltipOpts: {
                                                content: "%s : %y.0",
                                                shifts: {
                                                        x: -30,
                                                        y: -50
                                                }
                                        }
                            };   

                        $.plot(placeholder, [ 

                                {
                                        label: "Visits", 
                                        data: d1,
                                        lines: {fillColor: "#f2f7f9"},
                                        points: {fillColor: "#88bbc8"}
                                }, 
                                {	
                                        label: "Unique Visits", 
                                        data: d2,
                                        lines: {fillColor: "#fff8f2"},
                                        points: {fillColor: "#ed7a53"}
                                } 

                        ], options);

                });
                }//end if

                //Horizontal bars chart
            if (divElement.hasClass('horizontal-bars-chart')) {
                $(function () {
                        //some data
                        //Display horizontal graph
            var d1_h = [];
            for (var i = 0; i <= 5; i += 1)
                d1_h.push([parseInt(Math.random() * 30),i ]);

            var d2_h = [];
            for (var i = 0; i <= 5; i += 1)
                d2_h.push([parseInt(Math.random() * 30),i ]);

            var d3_h = [];
            for (var i = 0; i <= 5; i += 1)
                d3_h.push([ parseInt(Math.random() * 30),i]);

            var ds_h = new Array();
            ds_h.push({
                data:d1_h,
                bars: {
                    horizontal:true, 
                    show: true, 
                    barWidth: 0.2, 
                    order: 1,
                }
            });
                ds_h.push({
                    data:d2_h,
                    bars: {
                        horizontal:true, 
                        show: true, 
                        barWidth: 0.2, 
                        order: 2
                    }
                });
                ds_h.push({
                    data:d3_h,
                    bars: {
                        horizontal:true, 
                        show: true, 
                        barWidth: 0.2, 
                        order: 3
                    }
                });


                        var options = {
                                        grid: {
                                                show: true,
                                            aboveData: false,
                                            color: "#3f3f3f" ,
                                            labelMargin: 5,
                                            axisMargin: 0, 
                                            borderWidth: 0,
                                            borderColor:null,
                                            minBorderMargin: 5 ,
                                            clickable: true, 
                                            hoverable: true,
                                            autoHighlight: false,
                                            mouseActiveRadius: 20
                                        },
                                series: {
                                        grow: {active:false},
                                        bars: {
                                                show:true,
                                                        horizontal: true,
                                                        barWidth:0.2,
                                                        fill:1
                                                }
                                },
                                legend: { position: "ne" },
                                colors: chartColours,
                                tooltip: true, //activate tooltip
                                        tooltipOpts: {
                                                content: "%s : %y.0",
                                                shifts: {
                                                        x: -30,
                                                        y: -50
                                                }
                                        }
                        };

                        $.plot($(".horizontal-bars-chart"), ds_h, options);
                });
                }//end if

                //Auto update chart
            if (divElement.hasClass('auto-update-chart')) {
                $(function () {
                        // we use an inline data source in the example, usually data would
                    // be fetched from a server
                    var data = [], totalPoints = 300;
                    function getRandomData() {
                        if (data.length > 0)
                            data = data.slice(1);

                        // do a random walk
                        while (data.length < totalPoints) {
                            var prev = data.length > 0 ? data[data.length - 1] : 50;
                            var y = prev + Math.random() * 10 - 5;
                            if (y < 0)
                                y = 0;
                            if (y > 100)
                                y = 100;
                            data.push(y);
                        }

                        // zip the generated y values with the x values
                        var res = [];
                        for (var i = 0; i < data.length; ++i)
                            res.push([i, data[i]])
                        return res;
                    }

                    // Update interval
                    var updateInterval = 200;

                    // setup plot
                    var options = {
                        series: { 
                                grow: {active:false}, //disable auto grow
                                shadowSize: 0, // drawing is faster without shadows
                                lines: {
                                show: true,
                                fill: true,
                                lineWidth: 2,
                                steps: false
                            }
                        },
                        grid: {
                                        show: true,
                                    aboveData: false,
                                    color: "#3f3f3f" ,
                                    labelMargin: 5,
                                    axisMargin: 0, 
                                    borderWidth: 0,
                                    borderColor:null,
                                    minBorderMargin: 5 ,
                                    clickable: true, 
                                    hoverable: true,
                                    autoHighlight: false,
                                    mouseActiveRadius: 20
                                }, 
                                colors: chartColours,
                        tooltip: true, //activate tooltip
                                tooltipOpts: {
                                        content: "Value is : %y.0",
                                        shifts: {
                                                x: -30,
                                                y: -50
                                        }
                                },	
                        yaxis: { min: 0, max: 100 },
                        xaxis: { show: true}
                    };
                    var plot = $.plot($(".auto-update-chart"), [ getRandomData() ], options);

                    function update() {
                        plot.setData([ getRandomData() ]);
                        // since the axes don't change, we don't need to call plot.setupGrid()
                        plot.draw();

                        setTimeout(update, updateInterval);
                    }

                    update();
                });
                }//end if



        });


    </script>
    
    <!-- Important Place before main.js  -->
    <script type="text/javascript" src="<?php echo Yii::app()->baseUrl ?>/scripts/jquery/jquery-ui.min.js"></script>
    <script type="text/javascript" src="<?php echo Yii::app()->baseUrl;?>/supr/js/main.js"></script>
    
    

    </body>
</html>